<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-07-06
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String pash = request.getContextPath();
    String basepash = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pash + "/";
%>
<html>
<head>
    <base href="<%=basepash%>">
    <%@include file="/publs.jsp"%>
    <title>Title</title>
</head>
<body>
<div id="root">
    <%--<div id="main" style="width: 600px;height:400px;"></div>--%>
    <%--<div id="mains" style="width: 600px;height:400px;"></div>--%>

        <div id="tongjishouru" style="width: 600px;height:400px;"></div>
        <div id="tongjishourusadasdsa" style="width: 600px;height:400px"></div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
        //第一种图形
    // 指定图表的配置项和数据
    // var option = {
    //     title: {
    //         text: 'ECharts 入门示例'
    //     },
    //     tooltip: {},
    //     legend: {
    //         data:['销量']
    //     },
    //     xAxis: {
    //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","上衣"]
    //     },
    //     yAxis: {},
    //     series: [{
    //         name: '销量',
    //         type: 'bar',
    //         data: [5, 20, 36, 10, 10, 20,500]
    //     }]
    // };

    //第二种图形
    // option = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         type: 'line'
    //     }]
    // };


    //第三种种图形
    // option = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         type: 'line',
    //         smooth: true
    //     }]
    // };
    //第四种
    // let zhi= ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'];
    // option = {
    //     title : {
    //         text: '某站点用户访问来源',
    //         subtext: '纯属虚构',
    //         x:'center'
    //     },
    //     tooltip : {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         left: 'left',
    //         data:zhi
    //     },
    //     series : [
    //         {
    //             name: '访问来源',
    //             type: 'pie',
    //             radius : '55%',
    //             center: ['50%', '60%'],
    //             data:[
    //                 {value:335, name:'直接访问'},
    //                 {value:310, name:'邮件营销'},
    //                 {value:234, name:'联盟广告'},
    //                 {value:135, name:'视频广告'},
    //                 {value:1548, name:'搜索引擎'}
    //             ],
    //             itemStyle: {
    //                 emphasis: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                 }
    //             }
    //         }
    //     ]
    // };

    new Vue({
        el:"#root",
        data:{

        },
        methods:{
            // jiaZaiTongJiTu(){
            //     var myChart = echarts.init(document.getElementById('main'));
            //     let zhi= ["直接访问",'邮件营销','联盟广告','视频广告','搜索引擎'];
            //     option = {
            //         title : {
            //             text: '某站点用户访问来源',
            //             subtext: '纯属虚构',
            //             x:'center'
            //         },
            //         tooltip : {
            //             trigger: 'item',
            //             formatter: "{a} <br/>{b} : {c} ({d}%)"
            //         },
            //         legend: {
            //             orient: 'vertical',
            //             left: 'left',
            //             data:zhi
            //         },
            //         series : [
            //             {
            //                 name: '访问来源',
            //                 type: 'pie',
            //                 radius : '55%',
            //                 center: ['50%', '60%'],
            //                 data:[
            //                     {value:335, name:'直接访问'},
            //                     {value:310, name:'邮件营销'},
            //                     {value:234, name:'联盟广告'},
            //                     {value:135, name:'视频广告'},
            //                     {value:1548, name:'搜索引擎'}
            //                 ],
            //                 itemStyle: {
            //                     emphasis: {
            //                         shadowBlur: 10,
            //                         shadowOffsetX: 0,
            //                         shadowColor: 'rgba(0, 0, 0, 2)'
            //                     }
            //                 }
            //             }
            //         ]
            //     };
            //     // 使用刚指定的配置项和数据显示图表。
            //     myChart.setOption(option);
            // },
            //
            // jiaZaiTongJiTus(){
            //     var myChart = echarts.init(document.getElementById('mains'));
            //
            //     //第一种图形
            //     // 指定图表的配置项和数据
            //     let zhi = {
            //         a:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","毛衣","手套","袜子","鞋子","内衣"],
            //         b:[5, 10, 15, 20, 25,30, 35, 40, 45, 50]
            //     };
            //     var option = {
            //         title: {
            //             text: 'ECharts 入门示例'
            //         },
            //         tooltip: {},
            //         legend: {
            //             data:['销量']
            //         },
            //         xAxis: {
            //             data: zhi.a
            //         },
            //         yAxis: {},
            //         series: [{
            //             name: '销量',
            //             type: 'bar',
            //             data:zhi.b
            //         }]
            //     };
            //     // 使用刚指定的配置项和数据显示图表。
            //     myChart.setOption(option);
            // }



            axsdaso(){
                // app.title = '多 X 轴示例';
                let thiss = [];
                let thissnumber = [];
                let that = [];
                let thatnumber = [];
                var myChart = echarts.init(document.getElementById('tongjishouru'));
                var colors = ['#5793f3', '#d14a61', '#675bba'];
                axios.get("/ShouRuTongJi").then(({data})=>{
                    let riqi = data.obj[0][0].goumaishijian;
                    let as = "";
                    let ass = "";
                    if(data.obj[0].length!=0||data.obj[1].length!=0){
                        if(data.obj[1].length!=0){
                            let riqis = data.obj[1][0].goumaishijian;
                            ass = riqis.substring(0,riqi.lastIndexOf("-"));
                            for (let i = 0; i < data.obj[1].length; i++) {
                                thiss.push(data.obj[1][i].goumaishijian)
                                thissnumber.push(data.obj[1][i].totalprice);
                            }
                        }else{
                            ass = "无";
                        }
                        if(data.obj[0].length!=0){
                            let riqis = data.obj[0][0].goumaishijian;
                            as = riqis.substring(0,riqi.lastIndexOf("-"));
                            for (let i = 0; i < data.obj[0].length; i++) {
                                that.push(data.obj[0][i].goumaishijian)
                                thatnumber.push(data.obj[0][i].totalprice);
                            }
                        }else{
                                as = "无";
                        }
                    }

                    option = {
                        color: colors,
                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data:[ass+'销售收入']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[2]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '当天收入  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data:thiss
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                // name:'2016 降水量',
                                name :ass+'销售收入',
                                type:'line',
                                smooth: false,
                                // data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                                data: thissnumber
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
            },


            axsdassssso(){
                // app.title = '多 X 轴示例';
                let thiss = [];
                let thissnumber = [];
                let that = [];
                let thatnumber = [];
                var myChart = echarts.init(document.getElementById('tongjishourusadasdsa'));
                var colors = ['#5793f3', '#d11e33', '#675bba'];
                axios.get("/ShouRuTongJi").then(({data})=>{
                    let riqi = data.obj[0][0].goumaishijian;
                    let as = "";
                    let ass = "";
                    if(data.obj[0].length!=0||data.obj[1].length!=0){
                        if(data.obj[1].length!=0){
                            let riqis = data.obj[1][0].goumaishijian;
                            ass = riqis.substring(0,riqi.lastIndexOf("-"));
                            for (let i = 0; i < data.obj[1].length; i++) {
                                thiss.push(data.obj[1][i].goumaishijian)
                                thissnumber.push(data.obj[1][i].totalprice);
                            }
                        }else{
                            ass = "无";
                        }
                        if(data.obj[0].length!=0){
                            let riqis = data.obj[0][0].goumaishijian;
                            as = riqis.substring(0,riqi.lastIndexOf("-"));
                            for (let i = 0; i < data.obj[0].length; i++) {
                                that.push(data.obj[0][i].goumaishijian)
                                thatnumber.push(data.obj[0][i].totalprice);
                            }
                        }else{
                            as = "无";
                        }
                    }


                    option = {
                        color: colors,
                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            // data:['2015 降水量', '2016 降水量']
                            data:[as+'销售收入']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [
                            {

                            },
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[0]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '当天收入  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data:that
                                //  data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                // name:'2015 降水量',
                                name :as+'销售收入',
                                type:'line',
                                xAxisIndex: 1,
                                smooth: false,
                                // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                                data: thatnumber
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
            }
        },
        mounted(){
            this.axsdaso();
            this.axsdassssso();
        }
    })



</script>
</body>
</html>
